<template>
  <div class="main">
    <div class="margin10">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-card class="box-card">
            <span>cpu使用率</span>
            <div class="chart-wrapper">
              <GaugeChart ref="cpu" :charData="cpuSystemUsage" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <span>JVM内存</span>
            <WaveChart :charData="systemInfo.memoryJvmTotal / systemInfo.memoryJvmMax" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <span>磁盘占用</span>
            <WaveChart :charData="1 - (systemInfo.diskFree / systemInfo.diskTotal)" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <span>系统内存</span>
            <WaveChart :charData="1 - (systemInfo.memorySystemFree / systemInfo.memorySystemTotal)" />
          </el-card>
        </el-col>
      </el-row>


      <el-card class="top10" shadow="hover">
        网络流量
        <LineChart></LineChart>
      </el-card>
      <el-card class="top10" shadow="hover">
        CPU使用率趋势
        <LineChart></LineChart>
      </el-card>
      <el-card class="top10" shadow="hover">
        JVM内存使用率趋势
        <LineChart></LineChart>
      </el-card>

    </div>

  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import GaugeChart from './dashboard/GaugeChart'
import WaveChart from './dashboard/WaveChart'
import LineChart from './dashboard/LineChart'
import BarChart from './dashboard/BarChart'
import { last } from "@/api/system/systemInfo";
export default {
  name: "Index",
  components: {
    PanelGroup,
    GaugeChart,
    WaveChart,
    LineChart,
    BarChart
  },
  data() {
    return {
      // 版本号
      version: "3.6.2",
      gaugeChartData: "100",
      systemInfo: {},
      timer: null,
      cpuSystemUsage: 20,
    };
  },
  mounted() {
    this.getSystemInfo();
    this.timer = setInterval(this.getSystemInfo, 5000);
  },
  destroyed() {
    //清除定时器
    clearInterval(this.timer);
  },
  methods: {
    myStopFunction() {
      clearInterval(timer);
    },
    getSystemInfo() {
      last().then(res => {
        this.systemInfo = res.data
        this.cpuSystemUsage = res.data.cpuSystemUsage;


      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.main {
  background-color: rgb(240, 242, 243);
}

.margin10 {
  padding: 10px 50px 10px;
}

.top10 {
  margin-top: 10px;
}
</style>

